<template>
	<!-- 开通钱包 -->
	<view class="openWallet-main">
		<uni-notice-bar show-icon text="此手机号码用途用于支付验证" />
		<uni-forms :modelValue="formData">
			<uni-forms-item label="手机号" name="age" label-width="160rpx">
				<uni-easyinput type="text" v-model="formData.phone" placeholder="请输入手机号" />
			</uni-forms-item>

			<uni-forms-item label="验证码" name="age" label-width="160rpx">
				<view class="code-main">
					<uni-easyinput type="text" v-model="formData.code" placeholder="请输入验证码" />
					<view class="codeBtn" @click="getCode">获取验证码</view>
				</view>
			</uni-forms-item>
		</uni-forms>
		<button type="default" style="background-color: #e43927; color: #fff" @click="subPay">提交申请</button>
		<view class="tips">
			<uni-icons type="info" size="20" color="#999"></uni-icons>
			提交申请完成，请及时完成实名认证（用于绑定银行卡）
		</view>
	</view>
</template>

<script>
import { payapplyRegisterMember, payconfirmRegisterMember } from '../../api/payment/index.js';
import { validatePhoneNumber } from '../../utils/tools.js';
export default {
	data() {
		return {
			formData: {
				phone: '',
				code: ''
			}
		};
	},
	methods: {
		// 获取验证码
		async getCode() {
			if (!this.formData.phone) {
				return uni.showToast({
					title: '请输入手机号',
					icon: 'none'
				});
			}

			if (!validatePhoneNumber(this.formData.phone)) {
				return uni.showToast({
					title: '手机号格式不正确',
					icon: 'none'
				});
			}

			const resData = await payapplyRegisterMember({
				phone: this.formData.phone
			});
			uni.showToast({
				title: '获取成功',
				icon: 'none'
			});
		},

		async subPay() {
			if (!this.formData.phone) {
				return uni.showToast({
					title: '请输入手机号',
					icon: 'none'
				});
			}

			if (!validatePhoneNumber(this.formData.phone)) {
				return uni.showToast({
					title: '手机号格式不正确',
					icon: 'none'
				});
			}

			if (!this.formData.code) {
				return uni.showToast({
					title: '请输入验证码',
					icon: 'none'
				});
			}
			const resData = await payconfirmRegisterMember(this.formData);
			uni.showToast({
				title: '注册成功',
				icon: 'none'
			});
			setTimeout(() => {
				uni.navigateTo({
					url: '/pages/realNameAuthentication/realNameAuthentication'
				});
			}, 500);
		}
	}
};
</script>

<style>
page {
	background-color: #fff;
}
</style>

<style scoped lang="scss">
.openWallet-main {
	box-sizing: border-box;
	padding: 20rpx;
	.code-main {
		display: flex;
		align-items: center;
		justify-content: space-between;
		.codeBtn {
			background-color: #e43927;
			width: 160rpx;
			text-align: center;
			line-height: 60rpx;
			height: 60rpx;
			margin-left: 20rpx;
			color: #fff;
			border-radius: 6rpx;
			font-size: 26rpx;
		}
	}

	.tips {
		font-size: 12px;
		color: #999;
		height: 80rpx;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		justify-content: center;
	}
}
</style>
